<template>
  <ElFormItem v-bind="formItemProps">
    <template v-if="!props.children">
      <ElButton v-if="props.dataType === 'button'" v-bind="props.componentProps" v-on="props.componentEvents">
        {{ props.label }}
      </ElButton>
      <template v-else-if="props.dataType === 'label'">{{ props.label }}</template>
      <a v-else-if="props.dataType === 'a'" v-bind="props.componentProps">{{ props.label }}</a>
      <template v-else>
        <component
          :is="getComponent(props.dataType, props.componentName)"
          :ref="props.refKey"
          :key="option.name"
          v-bind="props.componentProps"
          v-on="props.componentEvents"
          :value="currentValue"
          @input="handleInput($event, option.itemXpath || option.name, option.rangeValue)"
          @change="handleInput($event, option.itemXpath || option.name, option.rangeValue)"
        ></component>
      </template>
      <el-tooltip v-if="props.tip" effect="light" :content="props.tip" placement="right">
        <i class="el-icon-warning-outline"></i>
      </el-tooltip>
    </template>
    <template v-else>
      <template v-for="(child, key) in props.children">
        <template v-if="!child.innerText">
          <component
            :is="getComponent(props.dataType, props.componentName)"
            :ref="child.refKey"
            :key="child.name"
            v-ctrl-state="state"
            v-bind="child.componentProps"
            v-on="child.componentEvents"
            :value="businessContainer.getValue(child.itemXpath, child.rangeValue)"
            @input="handleInput($event, child.itemXpath || child.name, child.rangeValue)"
            @change="handleInput($event, child.itemXpath || child.name, child.rangeValue)"
          ></component>
        </template>
        <template v-else>
          <component
            :is="getComponent(props.dataType, props.componentName)"
            :ref="child.refKey"
            :key="child.name"
            v-bind="child.componentProps"
            v-on="child.componentEvents"
            :value="businessContainer.getValue(child.itemXpath, child.rangeValue)"
            @input="handleInput($event, child.itemXpath || child.name, child.rangeValue)"
            @change="handleInput($event, child.itemXpath || child.name, child.rangeValue)"
            >{{ child.innerText }}</component
          >
        </template>
      </template>
    </template>
  </ElFormItem>
</template>
<script setup lang="ts" name="YqDynamicForm">
import { ElFormItem, ElButton } from "element-plus";
import { computed } from "vue";
import { YqDynamicFormItemProps } from "./types";
import { DataType } from "./dataType";

const props = withDefaults(defineProps<YqDynamicFormItemProps>(), {});

const formItemProps = computed(() => {
  return {
    prop: props.valueKey,
    label: props.label,
    ref: props.refKey
  };
});

const getComponent = (dataType: string, componentName?: string) => {
  return componentName || DataType[dataType] || dataType;
};
</script>
